<template>
  <view v-if="articleData" class="article-detail-container">
    <view class="detail-title">
      {{articleData.title}}
    </view>
    <view class="detail-header">
      <view class="detail-logo">
        <image :src="articleData.author.avatar" mode="aspectFill"></image>
      </view>
      <view class="detail-header-content">
        <view class="detail-header-content-title">
          {{articleData.author.author_name}}
        </view>
        <view class="detail-header-content-info">
          <text>{{articleData.create_time}}</text>
          <text>{{articleData.browse_count}} 浏览</text>
          <text>{{articleData.thumbs_up_count}} 赞</text>
        </view>
      </view>
      <button @click="_changeFollow" type="default" class="detail-header-button">{{isfollow?'取消关注':'关注'}}</button>
    </view>
	<view class="detail-content-container">
     <view class="detail-html">
        <u-parse v-if="content" no-data="数据加载中..." className="markdown-body" :content="content"></u-parse>
      </view>
	  <!-- 评论展示组件 -->
	  <view class="detail-comment">
	    <view class="comment-title">最新评论</view>
	    <view class="comment-content-container" v-for="item in commentList" :key="item.comment_id">
	      <CommentBox @commentReply="commentReply" :commentData="item"></CommentBox>
	    </view>
	    <view class="no-data" v-if="!commentList.length">暂无评论</view>
	  </view>
    </view> 
	
		<!-- 评论组件 -->
		<view class="detail-bottom">
			<view @click="comment" class="input-container">
				<text>谈谈你的看法</text>
				<uni-icons type="compose" size="16" color="#f07373"></uni-icons>
			</view>
			<view class="detail-bottom-icons">
				<view class="detail-bottom-icon-box">
					<uni-icons @click="goComment" type="chat" size="24" color="#f07373"></uni-icons>
				</view>
				<view class="detail-bottom-icon-box">
					<SaveLikes :item="articleData" :size="'22'"></SaveLikes>
				</view>
				<view class="detail-bottom-icon-box">
					<uni-icons @click="_changeFabulous"
					 :type="isfabulous? 'hand-up-filled': 'hand-up'" size="24" color="#f07373"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 评论区域组件 -->
		<CommentMasker @sendCommentData="sendComment"
		 @closePopupMasker="closePopupMasker" :showPopup="popup"></CommentMasker>
	</view>
</template>

<script>
import uParse from '@/components/u-parse/u-parse.vue'
import {marked} from 'marked'
	export default {
		components:{
			uParse
		},
		async onLoad(options){
			this._id = this.$Router.currentRoute.query._id
			// console.log(this.$Router.currentRoute.query.params._id)
			// this._id = JSON.parse(options.params)._id 
			// 文章详情获取
			await this._getArticleDetail();
			// 文章评论
			this.getComment()
		},
		data() {
			return {
				articleData: null,
				_id:0,
				popup:false,
				commentList: [],//
				replyData:{}, // 回复信息
			}
		},
		computed: {
			content () {
		      try {
				  // markedown转换格式
		        return marked(this.articleData.content)
		      } catch (e) {
		        return null
		    }
		},
			isfollow(){
				// 是否关注
				try {
				return this.userInfo && this.userInfo.author_likes_ids.includes(this.articleData.author.id)
				} catch (e) {
				  return null
				}

			},
			isfabulous(){
				// 是否点赞
				try {
				return this.userInfo && this.userInfo.thumbs_up_article_ids.includes(this.articleData._id)
				} catch (e) {
				  return null
				}
			}
		  },
		methods: {
			async _getArticleDetail() {
				// 文章数据获取
				const result = await this.$http.get_ariticle_detail({article_id:this._id })
				this.articleData = result.data[0]
			},
			async _changeFollow(){
				// 未登录时
				await this.checkedisLogin()
				// 是否关注作者
				const { msg } = await this.$http.update_follow_author({
					authorId:this.articleData.author.id,
					userId:this.userInfo._id,
				})
				await uni.showToast({
					title:msg,
					icon:'none'
				})
				// 改变store中的数据
				//处理用户存储信息
				let followIds = [...this.userInfo.author_likes_ids]
				if (followIds.includes(this.articleData.author.id)) {
				    followIds = followIds.filter(item => item !== this.articleData.author.id)
				}else {
				    followIds.push(this.articleData.author.id)
				}
				 this.updateUserInfo({...this.userInfo,author_likes_ids:followIds})
			},
			// 评论
			async comment() {
				// 未登录时
				await this.checkedisLogin()
				this.popup = true
			},
			goComment(){
				// 跳转评论列表
				uni.navigateTo({
					url:`/pages/commentList/index?articleId=${this.articleData._id}`
				})
			},
			closePopupMasker(status) {
				// 关闭弹出框
				// 清空当前
				this.replyData = {}
				this.popup = status
			},
			async sendComment(val){
				// 提交评论
				const result = await this.$http.update_comment({
					userId:this.userInfo._id,
					articleId:this.articleData._id,
					comment:val,
					...this.replyData
				})
				// 清空当前
				this.replyData = {}
				uni.showToast({
					title:'评论成功',
					icon:'none'
				})
				await this.getComment()
				this.popup = false
			},
			async getComment(){
				const result = await this.$http.get_comment({articleId:this.articleData._id})
				this.commentList = result.data
			},
			commentReply(val){
				// 回复数据
				this.replyData = {
					comment_id:val.comment.comment_id,
					is_reply: val.isReply
				}
				// 当前为回复内容的时候添加回复的ID
				val.comment.reply_id && (this.replyData.reply_id = val.comment.reply_id)
				this.popup = true
			},
			async _changeFabulous(){
				// 未登录时
				await this.checkedisLogin()
				// 是否关注作者
				const { msg } = await this.$http.update_thumbs_up({
					authorId:this.articleData._id,
					userId:this.userInfo._id,
				})
				await uni.showToast({
					title:msg,
					icon:'none'
				})
				uni.$emit('updateAuthor')
				// 改变store中的数据
				//处理用户存储信息
				let followIds = [...this.userInfo.thumbs_up_article_ids]
				if (followIds.includes(this.articleData._id)) {
				    followIds = followIds.filter(item => item !== this.articleData._id)
					this.articleData.thumbs_up_count--
				}else {
				    followIds.push(this.articleData._id)
					this.articleData.thumbs_up_count++
				}
				 this.updateUserInfo({...this.userInfo,thumbs_up_article_ids:followIds})
			}
	}
}

</script>

<style lang="scss">
@import './css/articleDetail.scss'
</style>
